<template>
	<view>
		<z-paging ref="paging" v-model="infoList" @query="queryList" :show-loading-more-no-more-view="false">
			<view slot="top">
				<view class="line"></view>
				<view class="timebg">
					<picker class="timetxt" mode="date" :value="date" :start="startDate" :end="endDate" fields="year"
						@change="bindDateChange">
						<view style="display: flex;align-items: center;">{{date}}
							<image src="../../../static/sanjiao.png" class="sanjiao"></image>
						</view>
					</picker>

					<view class="timetxt">
						<select-lay class="select-lay" :value="quarterValue" slabel="type" svalue="typeid"
							placeholder="季度" :showplaceholder="false" :options="quarterArr"
							@selectitem="quarterselectitem"></select-lay>
					</view>
				</view>
			</view>

			<image class="img" src="../../../static/note_bg.png"></image>
			<view class="bg_view" v-if="infoList.length > 0">
				<text class="title">超定额（计划）用水通知书</text>
				<text class="time">{{date}}年 {{quarterArr[quarterValue-1].type}}</text>
				<view class="viewline"></view>
				<text class="rich-text">{{infoList[0].dwmc}}({{infoList[0].jsdm}})
					{{Table0}}

					<view v-for="item in infoList" style="margin-top: 40rpx;margin-bottom: 40rpx;">{{item.ysmc}}超用水{{item.jjsl}}立方米, 其中二档水量为
						{{item.sl2}}立方米，应按基本水价1倍缴纳加价水费，金额为：{{item.je2}}元；第三档水量为{{item.sl3}}
						立方米，应按基本水价2倍缴纳加价水费，金额为：{{item.je3}}元</view>

					合计征收超计划加价水费{{infoList[0].sumje}}元。

					{{Table1}}

					缴费地点：{{infoList[0].gsjg}}</text>
				<text class="Contact">联系地址：{{infoList[0].dz}}
					联系单位：{{infoList[0].dw}}
					联 系 人：{{infoList[0].glxm}}
					联系电话：{{infoList[0].gldh}}</text>
			</view>
		</z-paging>
		<suspended @userData="childData"></suspended>
	</view>
</template>

<script>
	import {
		GetCstzListSinge,
		GetSpbbzList
	} from "@/common/api.js"
	export default {
		data() {
			return {
				quarterArr: [{
					type: '一季度',
					typeid: "1"
				}, {
					type: '二季度',
					typeid: "2"
				}, {
					type: '三季度',
					typeid: "3"
				}, {
					type: '四季度',
					typeid: "4"
				}],
				quarterValue: '',

				date: '年度',
				startDate: '1900',
				endDate: '2200',

				infoList: [],
				Table0: '',
				Table1: ''
			}
		},


		methods: {

			quarterselectitem(index, item) {
				this.quarterValue = item.typeid
				console.log(this.quarterValue);
				if(this.date != '年度') {
					this.$refs.paging.reload();
				}
			},

			bindDateChange(e) {
				console.log(e);
				this.date = e.target.value
				if(this.quarterValue != '') {
					this.$refs.paging.reload();
				}
			},

			async queryList(pageNo, pageSize) {
				
				if(this.date == '年度' || this.quarterValue == '') {
					uni.showToast({
						title:'请选择查询时间',
						icon:'none'
					})
					return
				}
				
				var data = {
					nd: parseInt(this.date),
					jd: parseInt(this.quarterValue),
					dwlx: '0'
				}
				let res = await GetCstzListSinge(data)
				this.$refs.paging.complete(res.response.data);
 
				this.GetSpbbzList()
			},

			async GetSpbbzList() {
				var data = {
					type: '9,10',
					nd: this.date
				}
				let res = await GetSpbbzList(data)
				this.Table0 = res.response.Table0[0].bz.replace("{0}", this.date).replace("{1}", this
					.quarterValue);
				this.Table1 = res.response.Table1[0].bz
			},
			
			childData(param) {
				this.$refs.paging.reload();
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #f4f4f4;
	}

	.pageView {
		padding: 0 24rpx 0 24rpx;
	}

	.line {
		width: 100%;
		height: 1rpx;
		background-color: #f4f4f4;
	}

	.timebg {
		width: 100%;
		height: 90rpx;
		background: #FFFFFF;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.timetxt {
		width: 50%;
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 42rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.sanjiao {
		width: 20rpx;
		height: 14rpx;
		margin-left: 17rpx;
	}

	.select-lay {
		width: 60%;
		height: 100%;
		background: transparent;
	}

	.bg_view {
		padding: 48rpx;
		position: absolute;
		display: flex;
		flex-direction: column;
	}

	.title {
		font-size: 36rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 54rpx;
	}

	.img {
		width: 507rpx;
		height: 438rpx;
		position: absolute;
		right: -47rpx;
	}

	.time {
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 37rpx;
		margin-top: 24rpx;
	}

	.viewline {
		width: 654rpx;
		height: 1rpx;
		background: #E6E6E6;
		border-radius: 16rpx;
		margin-top: 40rpx;
	}

	.rich-text {
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 46rpx;
		margin-top: 27rpx;
	}

	.Contact {
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 46rpx;
		margin-top: 46rpx;
	}
</style>
